<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">
</head>
<body>

<div class="container">
    <div class="row">
        <header class="col-md-12"><h1 class="text-center">社保医保</h1></header>
    </div>
    <div class="row">
        <div class="col-md-12"><h2>职工</h2></div>
        <hr/>
    </div>
    <div class="row">
        <div class="col-md-3">医保一次性补交总金额:</div>
        <div class="col-md-3 h3 text-success" id="zgybbjzje"></div>
        <div class="col-md-6"><label>请输入能交的月数：</label><input id="zgybbjys" type="text" placeholder="到退休时间为止"/></div>


    </div>
    <div class="row">
        <div class="col-md-12"><h2>城乡</h2></div>
        <hr/>
    </div>
    <div class="row">
        <div class="col-md-3">养老金每个月可领：</div>
        <div class="col-md-3 h3 text-success" id="cxylj"></div>
        <div class="col-md-6"><label>请输入养老保险总金额：</label><input id="cxylzje" type="text" placeholder="输入总金额"></div>

    </div>


    <script>
        window.onload=function () {
            //计算职工医保一次性补交总金额
            document.getElementById("zgybbjys").onblur=function () {
                document.getElementById("zgybbjzje").innerHTML=483.41 * (240-this.value);
            }
            //计算城乡养老金每个月可领的金额
            document.getElementById("cxylzje").onblur=function () {
                document.getElementById("cxylj").innerHTML=this.value / 139 +30 +310;
            }
        }

    </script>
</div>
</body>
</html>